<template>
	<view class="post_item" @click="goDeatil">
		<view class="text_info">
			<view class="main">
				<view class="title">{{ post.title }}</view>
				<view class="brief" v-html="post.content">
				</view>
			</view>
			<view class="item_footer">
				<view class="author_name">
					<text>{{ post.name }}</text>
				</view>
				<view class="like_count">
					<van-icon name="thumb-circle-o" />
					<text>{{ likeUsers.length }}</text>
				</view>
				<view class="view_count">
					<van-icon name="star-o" />
					<text>{{ favUsers.length }}</text>
				</view>
			</view>
		</view>
		<view class="preview_img">
			<van-image
				:src="post.image_url"
				width="200rpx"
				height="200rpx"
				radius="10rpx"
				fit="cover"
				lazy-load
				use-loading-slot
			>
				<van-loading slot="loading" type="spinner" size="20" vertical />
			</van-image>
		</view>
	</view>
</template>

<script setup>
import { nextTick, onMounted, watch } from 'vue';
import { storeToRefs } from 'pinia'
import usePostStore from '@/store/post.js'
const { post } = defineProps({
	post: {
		type: Object,
		required: true
	}
})
onMounted(() => {
	fetchData()
})
const postStore = usePostStore()
const { favUsers, likeUsers } = storeToRefs(postStore) 
function fetchData() {
	postStore.searchFavorityUsersAction(post.id)
	postStore.searchLikeUsersAction(post.id)
}

// 去详情页面
function goDeatil() {
	uni.navigateTo({
		url: `/pages/post-detail/post-detail?post_id=${post.id}`,
	});
}
</script>

<style lang="less" scoped>
.post_item {
	margin: 15rpx 0;
	height: 220rpx;
	background-color: #fff;
	display: flex;
	padding: 20rpx;
	width: 90%;
	border-radius: 20rpx;
	overflow: hidden;
	position: relative;
	left: 50%;
	top: 0;
	transform: translateX(-50%);
	// box-shadow: 0 2px 4px rgba(0, 0, 0, .12);
	.text_info {
		flex: 1;
		display: flex;
		flex-direction: column;
		.main {
			flex: 1;
			.title {
				padding-bottom: 15rpx;
				color: #000;
				font-weight: 700;
				font-size: 33rpx;
			}

			.brief {
				font-size: 28rpx;
				color: #444;
			}
		}

		.item_footer {
			display: flex;
			justify-content: left;
			color: var(--lightTextColor);
			font-size: 27rpx;
			.author_name,
			.like_count,
			.view_count {
				margin-right: 15rpx;
				display: flex;
				align-items: center;
				.footer_text {
					margin-left: 5rpx;
				}
			}
		}
	}

	.preview_img {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-left: 15rpx;
	}
}
</style>
